<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>走马灯</title>
    <style>
        #container {
            width: 750px;
            height: 198px;
            margin: 0 auto;
            display: flex;
        }
        #container > img{
            width: 110px;
            height: 198px;
        }
        #container div{
            position: relative;
            width: 640px;
            height: 198px;
            overflow: hidden;
            display: flex;
        }
        #container div ul {
            list-style: none;
            margin: 0;
            padding: 0;
            position: absolute;
            width: 640px;
            height: 198px;
            left: 0px;
            top: 0px;
            display: flex;
        }
        #container div ul li {
            width: 160px;
            height: 198px;
        }
    </style>
</head>
<body>
<!--图片尺寸：160*198-->
<div id="container">
    <img src="img/lunbo2.png">
    <div>
        <ul>
            <li><a href="#"><img src="img/lunbo4.png"></a></li>
            <li><a href="#"><img src="img/lunbo3.png"></a></li>
            <li><a href="#"><img src="img/lunbo5.png"></a></li>
            <li><a href="#"><img src="img/lunbo6.png"></a></li>
        </ul>
    </div>
    <img src="img/lunbo1.png">
</div>
<script>
    window.onload = function() {
        let container = document.getElementById('container');
        let scoll = container.getElementsByTagName("ul")[0];
        let imgArr = document.querySelectorAll('#container > img');
        let btnLeft = imgArr[0];
        let btnRight = imgArr[1];
        //滚动速度
        let speed = 5;
        //滚动方向(初始向右)
        let fangxiang = 1;
        //获取图片数量
        let imgNum = scoll.getElementsByTagName("img").length;
        //获取图片宽度
        let imgWidth = scoll.getElementsByTagName("img")[0].width;
        //获取滚动条宽度
        let scollWidth = imgNum * imgWidth;
        //给滚动条加一倍的内容
        scoll.style.width = scollWidth * 2 + "px";
        scoll.innerHTML += scoll.innerHTML;
        //滚动条初始位置
        scoll.style.left = "-" + scollWidth + "px";
        let myTimer = setInterval(gundong, 40);
        function gundong() {
            if (fangxiang == 1) {
                if (scoll.offsetLeft >= 0) {
                    scoll.style.left = "-" + scollWidth + "px";
                }
            } else {
                if (scoll.offsetLeft <= scollWidth * -1) {
                    scoll.style.left = 0 + "px";
                }
            }
            scoll.style.left = scoll.offsetLeft + (speed * fangxiang) + "px";
        }
        btnLeft.onmouseover = function() {
            fangxiang = -1;
        };
        btnRight.onmouseover = function() {
            fangxiang = 1;
        };
        scoll.onmouseover = function() {
            clearInterval(myTimer);
        }
        scoll.onmouseout = function() {
            myTimer = setInterval(gundong, 40);
        }
    }
</script>
</body>
</html>